<template>
	<view>
		<!-- 	<view class="top">
			<image src="@/static/img/san.png" class="san" @tap="goBack()"></image>
			<view class="title">
				新人问答红包
			</view>
		</view> -->
		<uni-nav-bar dark :fixed="true" shadow background-color="red" status-bar left-icon="left" left-text="返回"
			title="新人问答红包" @clickLeft="goBack()"></uni-nav-bar>
		<view class="main">
			<view class="store">
				<view class="tui">推广商家</view>
				<!-- <image src="@/static/img/logo.png" mode="widthFix" class="logo"></image> -->
				<!-- <image :src="PromotionImg" mode="aspectFit" class="logo"></image> -->
				<view class="left">
					<image :src="PromotionImg" class="preview-image"></image>
				</view>
				<view>商家logo/门头照片</view>
			</view>
			<view class="wenti">抽奖问题</view>
			<view class="an">
				<!-- 		<view class="ju">
					品牌的口号
				</view>
				<view class="rows">
					<view class="txt">答案1</view>
					<view class="txt">格力电器就是好</view>
					<view class="yuan"></view>
				</view>
				<view class="rows">
					<view class="txt">答案1</view>
					<view class="txt">格力电器就是好2222</view>
					<view class="yuan"></view>
				</view> -->
				<view class="ju">
					{{questionInfo.question}}
				</view>
				<radio-group @change="radioChange">
					<view class="rows" v-for="(item,index) in AnswerRedArr" :key="index">
						<view class="txt">答案{{index+1}}</view>
						<view class="txt">{{item.newComerAnswer}}</view>
						<view>
							<radio :color="selectedColor" :value="item.id" />
						</view>
					</view>
				</radio-group>
			</view>

			<view class="ok" @tap="subAnswer">提交</view>

		</view>
		<view class="bg" v-if="spqtk==1||spqtk==2"></view>
		<!-- 	<view class="caozuo ti" v-if="spqtk==1">
			<view class="zjHead">
				恭喜获得 1 元现金红包
			</view>
			<view class="ju">
				恭喜获得[红包连锁]商家现金抽奖机会
			</view>
			<view style="border: 1px gray solid;padding: 20upx;border-radius: 10upx;">
				<view class="rows">
					<view class="txt">名称</view>
					<view class="txt">类别</view>
					<view class="txt">数量</view>
					<view class="txt">抽奖时间</view>
				</view>
				<view class="rows" v-for="(item,index) in redArr" :key="index">
					<view>
						<image src="/static/img/rows.png" style="width:50upx;" mode="widthFix"></image>
					</view>
					<view class="txt">{{item.Money}}元</view>
					<view class="txt">{{item.Num}}名</view>
					<view class="txt cjsj">{{item.date}}</view>

				</view>
			</view>
			<view class="btns">
				<view class="ok" @tap="withdrawMoney">立即提现</view>
				<view class="ok" @tap="subAnswerYes">参与抽奖</view>
			</view>
		</view> -->

		<view class="caozuo ti" v-if="spqtk==1">
			<view class="ok" @tap="subAnswerYes">回答正确,参与抽奖</view>
		</view>
		<view class="caozuo ti" v-if="spqtk==2">
			<view class="ok" @tap="subAnswerNo">谢谢参与</view>
		</view>

	</view>

</template>

<script>
	import {
		GetNewComerQuestionInfo,
		SubmitAnswer,
		WithdrawMoney
	} from "@/api/redquestion";
	export default {
		components: {},
		data() {
			return {
				AnswerRedArr: [],
				promotionsId: '',
				current: 0,
				selectedColor: '#ff0000', // 自定义选中颜色
				currentValue: '',
				spqtk: 0,
				loading: false,
				questionInfo: {},
				redArr: [{
						"Money": 100,
						"Num": "1",
						"date": "2025-01-01"
					},
					{
						"Money": 30,
						"Num": "3",
						"date": "2025-01-01"
					},
					{
						"Money": 10,
						"Num": "10",
						"date": "2025-01-01"
					}
				],
				PromotionImg: "",
			}
		},
		onLoad(option) {
			this.RenderAnswer(option.id);
		},
		methods: {	
			subAnswerYes() {
				this.spqtk = 0;
			},
			subAnswerNo() {
				this.spqtk = 0;
			},
			subAnswer() {
				if (this.currentValue == '') {
					return uni.showToast({
						title: '请选择答案',
						icon: 'error'
					});
				}
				SubmitAnswer({
						openid: this.$store.state.user.openid,
						promotionsId: this.promotionsId,
						QuestionId: this.questionInfo.id,
						AnswerId: this.currentValue
					})
					.then(res => {
						if (res != null) {
							if (res.msg == "已参与问答活动") {
								uni.showToast({
									title: '已参与问答活动,不允许重复参与',
									icon: 'none'
								});
								return;
							}
							let flag = res.data;
							if (flag) {
								uni.navigateTo({
									url: '/pages/red/tuiguang?id=' + this.promotionsId
								})
								// uni.showToast({
								// 	title: '回答正确,参与抽奖',
								// 	icon: 'none'
								// });
								// this.spqtk = 1;
							} else {
								this.spqtk = 2;
							}

						}
					})
					.catch(res => {
						console.log(res);
					});

			},
			RenderAnswer(id) {
				GetNewComerQuestionInfo({
						PromotionUsersId: id
					})
					.then(res => {
						if (res != null) {
							let data = res.data;
							this.AnswerRedArr = data.promotionsNewComerAnswer;
							this.questionInfo = data.promotionsQuestion;
							this.promotionsId = data.promotionsId;
							this.PromotionImg = `${this.$config.HTTP_REQUEST_URL}${data.siteInfoImgs}`;
						}
					})
					.catch(res => {
						console.log(res);
					});

				// this.AnswerRedArr = [{
				// 		value: 'USA',
				// 		name: '格力电器就是好',
				// 		checked: 'true'
				// 	},
				// 	{
				// 		value: 'CHN',
				// 		name: '好空调，格力造',
				// 		checked: 'false'
				// 	},
				// 	{
				// 		value: 'BRA',
				// 		name: '格力变频空调，一天只用1度电',
				// 		checked: 'false'
				// 	},
				// 	{
				// 		value: 'BRA1',
				// 		name: '拥有格力，享受美好生活',
				// 		checked: 'false'
				// 	}
				// ]
			},
			radioChange(evt) {
				this.currentValue = evt.detail.value;
				this.AnswerRedArr.forEach(item => {
					item.checked = (item.value === this.currentValue);
				});
			},
			goBack() {
				uni.navigateBack({
					delta: 1 // 返回上一页面
				});
			},
			withdrawMoney() {
				uni.showLoading({
					title: '提现中...'
				});

				WithdrawMoney({
						amount: 1, // 1元
						questionId: this.questionInfo.id
					})
					.then(res => {
						uni.hideLoading();
						if (res.code === 200) {
							uni.showToast({
								title: '提现成功',
								icon: 'success'
							});
							this.spqtk = 0;
						} else {
							uni.showToast({
								title: res.message || '提现失败',
								icon: 'none'
							});
						}
					})
					.catch(err => {
						uni.hideLoading();
						uni.showToast({
							title: '提现失败',
							icon: 'none'
						});
					});
			},
		}
	}
</script>

<style>
	.logo {
		width: 250upx;
		width: 300upx;
		margin-left: 5%;
		margin-right: 5%;
		object-fit: cover;
	}

	.preview-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.left {
		width: 26%;
		height: 200rpx;
		margin: 0rpx 20rpx;
	}

	.uni-group {
		display: flex;
		align-items: center;
	}

	.bg {
		position: fixed;
		width: 100%;
		height: 100%;
		background-color: #000;
		z-index: 0;
		opacity: 0.5;
		left: 0;
		top: 0;

	}

	.caozuo {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 99;
		background-color: #fff;
		z-index: 9;
		width: 90%;
		border-radius: 20upx;
		display: flex;
		padding: 3.5%;
	}

	.ti {
		flex-direction: column;
	}

	.san {
		width: 20upx;
		height: 30upx;
		position: absolute;
		left: 0;
	}

	.container {
		padding: 20px;
	}

	/* .radio {
		display: block;
		margin-bottom: 10px;
	} */
	radio {
		transform: scale(0.8);
		/* 可选：调整大小 */
	}

	/* 改变选中状态下的 radio 样式 */
	radio[checked] {
		color: #ff0000;
		/* 设置你想要的颜色 */
		background-color: #ff0000;
		width: 80%;
		height: 100%;
		border-radius: 50%;
		/* 圆角设置为50%，使元素变为圆形 */
		border: 1px solid #ccc;
		/* 边框颜色和宽度 */
		position: relative;
		/* 设置相对定位，以便放置内部的圆点 */
	}

	.top {
		color: #3D3D3D;
		font-size: 35upx;
		text-align: center;
		margin-top: 15%;
	}

	.main {
		width: 90%;
		margin: 0 auto;
	}

	.store {
		display: flex;
		margin-top: 8%;
		align-items: center;
	}


	.tui {
		color: #3D3D3D;
		font-weight: 600;
		font-size: 30upx;
	}

	.wenti {
		color: #3D3D3D;
		font-size: 33upx;
		font-weight: 550;
		margin-top: 5%;
	}

	.an {
		width: 100%;
		border: 1px solid #A5A5A5;
		margin-top: 5%;
		padding-left: 3%;
		padding-right: 3%;
		border-radius: 15upx;
	}

	.ju {
		text-align: left;
		margin-top: 3%;
		margin-bottom: 3%;
	}

	.zjHead {
		text-align: center;
		margin-top: 3%;
		margin-bottom: 3%;
		font-size: 40upx;
	}

	.rows {
		display: flex;
		justify-content: space-between;
		margin-top: 3%;
		margin-bottom: 3%;
	}

	.yuan {
		border: 1px solid #A5A5A5;
		width: 40upx;
		height: 40upx;
		border-radius: 100%;
	}

	.txt {
		display: flex;
	}

	.cjsj {
		color: #FC0000;
		font-weight: bold;
	}

	.ok {
		background-color: #FC0000;
		color: #FFFFFF;
		width: 300upx;
		height: 100upx;
		font-size: 40upx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 auto;
		margin-top: 10%;
		padding-top: 3%;
		padding-bottom: 3%;
		border-radius: 45upx;
	}

	.btns {
		display: flex;
		justify-content: space-around;
		width: 100%;
	}

	.btns .ok {
		margin: 20upx;
		width: 250upx;
	}
</style>